<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>商品管理</title>
    <link href="../../static/css/index.css" rel="stylesheet" th:href="@{/static/css/index.css}">
    <!-- 自定义css文件 -->
    <link href="../../static/css/common.css" rel="stylesheet" th:href="@{/static/css/common.css}">
</head>

<body>

<div th:replace="~{nav :: nav('商品管理')}"></div>
<div th:replace="~{header :: header}"></div>
<div class="margin-helper">
    <div class="samoyed-content">
        <div th:replace="~{pageHead :: pageHead(pageName='商品管理', parentMenu='菜单导航')}"></div>
        <div id="page-content" class="page-content" v-cloak>

            <el-container>
                <el-header height="50">

                    <el-row>
                        <el-col :span="2" style="line-height: 40px">
                                <span>商品类别:</span>

                        </el-col>
                        <el-col :span="5">



                            <el-select v-model="info.categoryId" placeholder="请选择商品类别">
                                <el-option
                                        v-for="item in categorys"
                                        :key="item.categoryId"
                                        :label="item.categoryName"
                                        :value="item.categoryId">
                                </el-option>
                            </el-select>


                        </el-col>
                        <el-col :span="2" style="line-height: 40px">

                            <span>商品名称:</span>
                        </el-col>
                        <el-col :span="5">

                                <el-input v-model="info.productName" placeholder="可以模糊搜索"></el-input>

                        </el-col>
                        <el-col :span="3" style="line-height: 40px">
                            &nbsp;
                            <span>是否缺货:</span>

                        </el-col>
                        <el-col :span="4">
                            <el-select  placeholder="请选择" v-model="info.isLack">
                                <el-option
                                        label="缺货"
                                        value="0">
                                </el-option>
                                <el-option
                                        label="不缺货"
                                        value="1">
                                </el-option>
                            </el-select>

                        </el-col>
                        <el-col :span="3" style="text-align: right">
                                <el-button type="primary" @click="search">搜索</el-button>

                        </el-col>
                    </el-row>

                </el-header>
                <el-main>
                    <el-table
                            :data="tableData"
                            border
                            style="width: 100%; min-height: 500px"  :row-style="rowStyle">

                        <el-table-column type="expand">
                            <template slot-scope="tableData">
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <el-row>
                                 <el-col :span="12">


                                     <el-row>
                                         <el-form-item label="是否上架"><span>{{ tableData.row.productIsSale==1?'是':'否' }}</span>
                                         </el-form-item>
                                         <el-form-item label="是否缺货"><span>{{ tableData.row.productIsLack==1?'不缺货':'缺货' }}</span>
                                         </el-form-item>
                                         <el-form-item label="排序">
                                          <el-button type="text" @click="downdateOrder(tableData.row.productId)"  size="small" >-</el-button>
                                            <span >{{ tableData.row.productOrder }}</span>
                                          <el-button type="text" @click="updateOrder(tableData.row.productId)"   size="small" >+</el-button>
                                         </el-form-item>
                                         <el-form-item label="入库时间"><span>{{ tableData.row.productDateTime }}</span>
                                         </el-form-item>
                                     </el-row>
                                     <el-row>
                                         <el-form-item label="建议零售价"><span>{{ tableData.row.productSuggestPrice }}</span>
                                         </el-form-item>


                                     </el-row>

                                     <el-row v-for="param in tableData.row.params "  :key="param.dataId">
                                         {{ param.dataName }}  : {{ param.dataValue }}

                                     </el-row>


                                 </el-col>
                                <el-col :span="12">
                                    <el-form-item>

                                        <img style="height: 250px;width: 200px" v-bind:src="web_static_server+tableData.row.productPhoto" alt="">

                                    </el-form-item>

                                </el-col>

                                    </el-row>
                                </el-form>
                            </template>
                        </el-table-column>

                        <el-table-column
                                prop="productCode"
                                label="条形码"
                                width="160">
                        </el-table-column>


                        <el-table-column
                                prop="productName"
                                label="商品名称"
                                width="200">
                        </el-table-column>
                        <el-table-column
                                prop="productSmallUnit"
                                label="小单位"
                        >
                        </el-table-column>

                        <el-table-column
                                prop="productSmallPrice"
                                label="价格"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="productStandard"
                                label="规格">

                        </el-table-column>

                        <el-table-column
                                prop="productLargerUnit"
                                label="大单位"
                        >
                        </el-table-column>

                        <el-table-column
                                prop="productLargerPrice"
                                label="价格"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="productLargerStandard"
                                label="规格">

                        </el-table-column>

                        <el-table-column
                                prop="category.categoryName"
                                label="类别"  width="100" >

                        </el-table-column>

                        <el-table-column
                                fixed="right"
                                label="操作"
                                width="100">
                            <template slot-scope="scope">
                                <el-button  @click="handleClick(scope.row.productId)" type="text" size="small">修改</el-button>
                                <el-button  @click="handleDrop(scope.row.productId)" type="text" size="small">作废</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <el-pagination
                            background
                            @current-change="handleCurrentChange"
                            :current-page.sync="pageNum"
                            :page-size="pageSize"
                            layout="total, prev, pager, next"
                            :total="total">
                    </el-pagination>

                </el-main>

            </el-container>

        </div>
    </div>
</div>

<script src="../../static/js/vue.js" th:src="@{/static/js/vue.js}"></script>
<script src="../../static/js/element.js" th:src="@{/static/js/element.js}"></script>
<script src="../../static/js/jquery-3.3.1.min.js" th:src="@{/static/js/jquery-3.3.1.min.js}"></script>
<script src="../../static/js/utils.js" th:src="@{/static/js/utils.js}"></script>
<script src="../../static/js/config.js" th:src="@{/static/js/config.js}"></script>
<script type="text/javascript" th:src="@{/static/js/axios.min.js}"></script>

<!-- 引用vue组件相关的js文件 -->
<div th:replace="~{nav :: vue('订单管理')}"></div>
<div th:replace="~{header :: vue}"></div>
<script>

    var vue =new Vue({
        el: '#page-content',
        data:{
            tableData: '',
            pageNum:1,
            pageSize:8,
            total:0,
            web_static_server:_global_web_server+"/static/",
            info:{
                productName:'',
                categoryId:'',
                isLack:''
            },
            categorys:[]


        },
        created: function () {
            this.init();
            this.init2();
        },
        methods:{
            rowStyle:function (scope) {

                if(scope.row.productIsLack==0){
                    return  'background-color:#D1EEEE';
                }
                return 'background-color: '

            },

            init:function () {
                var url=_global_web_server +"/product/list";
                var _self=this;
                axios.get(url,{
                    params:{
                        pageNum:_self.pageNum,
                        pageSize:_self.pageSize,
                        categoryId:_self.info.categoryId,
                        productName:_self.info.productName,
                        isLack:_self.info.isLack
                    }
                }).then(function (response) {
                    var  jsonResult=response.data;
                    var  pageInfo =jsonResult.data;
                    _self.tableData=pageInfo.list;
                    _self.total=pageInfo.total;

                }).catch(function (reason) {
                    console.log(reason);
                });
            },
            init2:function () {
                var url=_global_web_server +"/category/qryList";
                var _self=this;
                axios.get(url).then(function (response) {
                    var  jsonResult=response.data;
                    _self.categorys =jsonResult.data;


                }).catch(function (reason) {
                    console.log(reason);
                });
            },
            search:function () {

                var _self=this;

                if(_self.info.productName=='' && _self.info.categoryId=='' && _self.info.isLack ==''){

                    _self.$notify({
                        title:'警告',
                        message:'没有任何搜索项发现',
                        type: 'warning'
                    });
                }else{
                    _self.pageNum=1;  //初始化第一页
                    this.init();
                }


            }

            ,
            handleCurrentChange:function (value) {
                this.pageNum=value;
                this.init();

            },
            handleDrop:function (id) {
                var _self=this;
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function(){
                    var url=_global_web_server +"/product/drop";
                    axios.get(url,{
                        params:{
                            productId:id
                        }
                    }).then(function (response) {
                        var  jsonResult=response.data;
                        if(jsonResult.status=="200"){
                                window.location.reload();
                        }else{
                            _self.$notify({
                                title:'警告',
                                message:jsonResult.message,
                                type: 'error'
                            });
                        }
                    }).catch(function (reason) {
                        alert("请求异常");
                    });
                }).catch(function() {

                });
            },
            updateOrder:function (id) {
                var url=_global_web_server +"/product/upOrder";
                var _self=this;
                axios.get(url,{
                    params:{
                        productId:id
                    }
                }).then(function (response) {
                    var  jsonResult=response.data;
                    if(jsonResult.status=="200"){
                        //修改界面集合数据
                        _self.tableData.forEach(function (item) {
                            if(item.productId==id){
                                item.productOrder+=1;
                            }
                        });
                    }else{
                        alert(jsonResult.message);
                    }
                }).catch(function (reason) {
                    alert("请求异常");
                });
            },
            downdateOrder:function (id) {
                var url=_global_web_server +"/product/downOrder";
                var _self=this;
                axios.get(url,{
                    params:{
                        productId:id
                    }
                }).then(function (response) {
                    var  jsonResult=response.data;
                    if(jsonResult.status=="200"){
                        //修改界面集合数据
                        _self.tableData.forEach(function (item) {
                            if(item.productId==id){
                                item.productOrder-=1;
                            }
                        });
                    }else{
                        alert(jsonResult.message);
                    }
                }).catch(function (reason) {
                    alert("请求异常");
                });
            },
            handleClick:function (id) {
                window.sessionStorage.setItem("productId",id);
                jumpToURL("/wxhsh/view/update-product");
            }
        }
    });



</script>

</body>

</html>